<template>
    <el-container>
        <el-header class="list_head">
            <div style="position:absolute;top:5%;left:3%">
                <el-button plain @click="back()">返回</el-button>
                <el-button plain @click="$router.push('/')">主页</el-button>
            </div></el-header>
        <el-main class="list_main">
            <el-backtop :right="100" :bottom="100" />
    <div style="min-height: 40vh;">
    <div class="container">
        <div class="point film_item">
            <el-image style="width: 150px; height: 150px" :src= "film.imagePath" :fit="fit" />
            <div class="film_detail">
                <div class="film_name">
                    <div class="name">{{ film.name }}</div>
                    <div class="engname">{{ film.engName }}</div>
                </div>
                <div class="film_actor">演员：{{ film.actor }}</div>
                <div style="font-size:12px;top: 60px;position: absolute;overflow: hidden;display: flex;">
                    <div>导演：{{ film.director }}</div>
                    <div style="margin-left:20px">编剧：{{ film.scriptwriter }}</div>
                </div>
                <div class="film_story">剧情：{{ film.synopsis }}</div>
                <div style="display:flex;position: absolute;top: 130px;">
                    <div style="font-size:12px;color: grey;">{{ film.type }}</div>
                    <div style="font-size:12px;margin-left: 50px;color: grey;">{{ film.productionArea }}</div>
                    <div style="font-size:12px;margin-left: 50px;color: grey;">{{ film.remarkCount }}</div>
                </div>
            </div>
        </div>
        <div style="display:flex;margin-left:150px;margin-top: 20px;">
            <div>观众总体评价：</div>  
            <el-rate
            v-model="valuetotal"
            disabled
            allow-half:true
            show-score
            text-color="#ff9900"
            :score-template=film.score
            style="margin-left:50px;">
            </el-rate>
        </div>
        <div style="display:flex;margin-left:150px;margin-top: 20px;">
            <div>观众评价：</div>  
            <el-rate
            v-model="value1"
            disabled
            show-score
            text-color="#ff9900"
            :score-template=film.starOne
            style="margin-left:50px;">
            </el-rate>
            <el-rate
            v-model="value2"
            disabled
            show-score
            text-color="#ff9900"
            :score-template=film.starTwo
            style="margin-left:50px;">
            </el-rate>
            <el-rate
            v-model="value3"
            disabled
            show-score
            text-color="#ff9900"
            :score-template=film.starThree
            style="margin-left:50px;">
            </el-rate>
            <el-rate
            v-model="value4"
            disabled
            show-score
            text-color="#ff9900"
            :score-template=film.starFour
            style="margin-left:50px;">
            </el-rate>
            <el-rate
            v-model="value5"
            disabled
            show-score
            text-color="#ff9900"
            :score-template=film.starFive
            style="margin-left:50px;">
            </el-rate>
        </div>
    </div>
  </div>   
    
  <div style="width:80%;margin-left:10%;background-color: #fff;margin-bottom: 5%;">
        <div v-for="(item,i) in comments" :key="i" class="author-title reply-father" style="margin-left:10%;">
            <div style="display:flex">
                <el-avatar class="header-img" :size="40" :src="item.avatar"></el-avatar>
                <div class="author-info" style="display: flex;">
                    <div>
                    <span class="author-name">{{item.name}}</span>
                    <span class="author-time">{{item.postTime}}</span>       
                    </div>    
                </div>
            </div>
            <div class="title">{{ item.title }}</div>
            <div>
            <div class="talk-box">
                <p>
                    <span class="reply">{{item.content}}</span>
                </p>
            </div>
            </div>
          </div>
    </div>
    </el-main>
</el-container>
</template>

<script>
const clickoutside = {
    // 初始化指令
    bind(el, binding, vnode) {
    function documentHandler(e) {
    // 这里判断点击的元素是否是本身，是本身，则返回
        if (el.contains(e.target)) {
            return false;
        }
    // 判断指令中是否绑定了函数
        if (binding.expression) {
            // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
            binding.value(e);
        }
    }
    // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
    el.vueClickOutside = documentHandler;
    document.addEventListener('click', documentHandler);
    },
    update() {},
    unbind(el, binding) {
    // 解除事件监听
    document.removeEventListener('click', el.vueClickOutside);
    delete el.vueClickOutside;
  },
};
import {getMovieById,getCommentById} from "../api/index.js";
export default {
    name:'ArticleComment',
    data(){
        return{
            film:{
            },
            pageparam:1,
            current:{
                params:{
                    current:1
                }
            },
            valuetotal:0,
            value1:1,
            value2:2,
            value3:3,
            value4:4,
            value5:5,
            btnShow: false,
            index:'0',
            replyComment:'',
            myName:'Lana Del Rey',
            myHeader:'https://ae01.alicdn.com/kf/Hd60a3f7c06fd47ae85624badd32ce54dv.jpg',
            myId:19870621,
            to:'',
            toId:-1,
            comments:[]
            // comments:[
            //     {
            //         name:'Lana Del Rey',
            //         id:19870621,
            //         headImg:'https://ae01.alicdn.com/kf/Hd60a3f7c06fd47ae85624badd32ce54dv.jpg',
            //         comment:'好看爱看',
            //         time:'2019年9月16日 18:43',
            //         commentNum:2,
            //         like:15,
            //         inputShow:false,
            //     },
            //     {
            //         name:'Taylor Swift',
            //         id:19891221,
            //         headImg:'https://ae01.alicdn.com/kf/H94c78935ffa64e7e977544d19ecebf06L.jpg',
            //         comment:'66666666',
            //         time:'2019年9月16日 18:43',
            //         commentNum:1,
            //         like:5,
            //         inputShow:false,
            //     },
            //     {
            //         name:'Norman Fucking Rockwell',
            //         id:20190830,
            //         headImg:'https://ae01.alicdn.com/kf/Hdd856ae4c81545d2b51fa0c209f7aa28Z.jpg',
            //         comment:'fuck you',
            //         time:'2019年9月16日 18:43',
            //         commentNum:0,
            //         like:5,
            //         inputShow:false,
            //     },
            // ]
        }
    },
    directives: {clickoutside},
    created() { 
        this.getMovieById(this.$route.query.id)
        this.getCommentById(this.$route.query.id)
        this.pageparam=this.$route.query.currentpage
    },
    methods: {
        back(){
            if(this.pageparam==undefined){
                this.$router.push('/FilmList?pageparam='+1)
            }
            else{
                this.$router.push('/FilmList?pageparam='+this.pageparam)
            }
        },
        async getMovieById(param){
          this.film = await getMovieById(param)
          this.valuetotal=parseFloat(this.film.score)/2
        },
        async getCommentById(param){
          this.comments = await getCommentById(param,this.current)
        },
        inputFocus(){
            var replyInput = document.getElementById('replyInput');
            replyInput.style.padding= "8px 8px"
            replyInput.style.border ="2px solid blue"
            replyInput.focus()
        },  
        showReplyBtn(){
            this.btnShow = true
        },
        hideReplyBtn(){
            this.btnShow = false
            replyInput.style.padding= "10px"
            replyInput.style.border ="none"
        },
        showReplyInput(i,name,id){
            this.comments[this.index].inputShow = false
            this.index =i
            this.comments[i].inputShow = true
            this.to = name
            this.toId = id
        },
        _inputShow(i){
            return this.comments[i].inputShow 
        },
        sendComment(){
            if(!this.replyComment){
                 this.$message({
                    showClose: true,
                    type:'warning',
                    message:'评论不能为空'
                })
            }else{
                let a ={}
                let input =  document.getElementById('replyInput')
                let timeNow = new Date().getTime();
                let time= this.dateStr(timeNow);
                a.name= this.myName
                a.comment =this.replyComment
                a.headImg = this.myHeader
                a.time = time
                a.commentNum = 0
                a.like = 0
                this.comments.push(a)
                this.replyComment = ''
                input.innerHTML = '';

            }
        },
        sendCommentReply(i,j){
            if(!this.replyComment){
                 this.$message({
                    showClose: true,
                    type:'warning',
                    message:'评论不能为空'
                })
            }else{
                let a ={}
                let timeNow = new Date().getTime();
                let time= this.dateStr(timeNow);
                a.from= this.myName
                a.to = this.to
                a.fromHeadImg = this.myHeader
                a.comment =this.replyComment
                a.time = time
                a.commentNum = 0
                a.like = 0
                this.comments[i].reply.push(a)
                this.replyComment = ''
                document.getElementsByClassName("reply-comment-input")[i].innerHTML = ""
            }
        },
        onDivInput: function(e) {
            this.replyComment = e.target.innerHTML;
        },
        dateStr(date){
            //获取js 时间戳
            var time=new Date().getTime();
            //去掉 js 时间戳后三位，与php 时间戳保持一致
            time=parseInt((time-date)/1000);
            //存储转换值 
            var s;
            if(time<60*10){//十分钟内
                return '刚刚';
            }else if((time<60*60)&&(time>=60*10)){
                //超过十分钟少于1小时
                s = Math.floor(time/60);
                return  s+"分钟前";
            }else if((time<60*60*24)&&(time>=60*60)){ 
                //超过1小时少于24小时
                s = Math.floor(time/60/60);
                return  s+"小时前";
            }else if((time<60*60*24*30)&&(time>=60*60*24)){ 
                //超过1天少于30天内
                s = Math.floor(time/60/60/24);
                return s+"天前";
            }else{ 
                //超过30天ddd
                var date= new Date(parseInt(date));
                return date.getFullYear()+"/"+(date.getMonth()+1)+"/"+date.getDate();
            }
        }
    },    
}
</script>

<style scoped lang="css">
.container{
    background-color:#fff;
    padding-top: 5%;
    padding-bottom: 5%;
}
.film_item{
    margin-left:150px;
    margin-top: 40px;
    display: flex;
}
.film_detail{
    height:150px;
    position: absolute;
    left:350px;
    width: 60%;
}
.film_name{
    font-size:20px;
    font-weight:800;
    position: absolute;
    display: flex;
    height: 30px;
}
.film_name .name{
   width:200px;
   text-align: left;
}
.film_name .engname{
   overflow: hidden;
}
.film_actor{
    font-size:12px;
    top: 40px;
    position: absolute;
    overflow: hidden;
    display:-webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
.film_story{
    font-size:12px;
    text-align: left;
    top: 80px;
    position: absolute;
    overflow: hidden;
    display:-webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.list_head{
    width:100%;
    height:100px;
    padding:0px;
    min-width: 1366px;
    background-color:rgb(159, 159, 159);
  }
  .title{
    text-align: left;
    margin:0 50px;
    margin-top: 10px;
    width: 80%;
    font-size: 15px;
    font-weight: 800;
  }
  .list_main{
    background-color:#fff;
    padding:0px;
    height: auto;
    width: 100%;
    min-width: 1366px;
    /* position: fixed; */
    /* overflow: hidden; */
  }
    .my-reply {
        padding: 10px;
        background-color: #fafbfc;
        margin-left: -100px;
    }

    .my-reply .header-img {
        margin: 0 50px;
        margin-top: 10px;
        width: 80%;
        text-align: left;
    }

    .my-reply .reply-info {
        display: inline-block;
        margin-left: 5px;
        width: 90%;
    }

    @media screen and (max-width: 1200px) {
        .my-reply .reply-info {
            width: 80%;
        }
    }

    .my-reply .reply-info .reply-input {
        min-height: 20px;
        line-height: 22px;
        padding: 10px 10px;
        color: #ccc;
        background-color: #fff;
        border-radius: 5px;
    }

    .my-reply .reply-info .reply-input:empty:before {
        content: attr(placeholder);
    }

    .my-reply .reply-info .reply-input:focus:before {
        content: none;
    }

    .my-reply .reply-info .reply-input:focus {
        padding: 8px 8px;
        border: 2px solid #00f;
        box-shadow: none;
        outline: none;
    }

    .my-reply .reply-btn-box {
        height: 25px;
        margin: 10px 0;
    }

    .my-reply .reply-btn-box .reply-btn {
        position: relative;
        float: right;
        margin-right: 15px;
    }

    .my-comment-reply {
        margin-left: 50px;
    }

    .my-comment-reply .reply-input {
        width: flex;
    }

    .author-title:not(:last-child) {
        border-bottom: 1px solid rgba(178, 186, 194, 0.3);
    }

    .author-title {
        margin-top: 1rem;
        padding: 10px;
    }

    .author-title .header-img {
        display: inline-block;
        vertical-align: top;
    }

    .author-title .author-info {
        display: inline-block;
        margin-left: 5px;
        width: 60%;
        height: 40px;
        line-height: 20px;
    }

    .author-title .author-info > span {
        display: block;
        cursor: pointer;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .author-title .author-info .author-name {
        color: #000;
        font-size: 18px;
        font-weight: bold;
        display: flex;
    }

    .author-title .author-info .author-time {
        font-size: 14px;
        display: flex;
    }

    .author-title .icon-btn {
        padding: 0 !important;
        float: right;
    }

    @media screen and (max-width: 1200px) {
        .author-title .icon-btn {
            width: 20%;
            padding: 7px;
        }
    }

    .author-title .icon-btn > span {
        cursor: pointer;
    }

    .author-title .icon-btn .iconfont {
        margin: 0 5px;
    }

    .author-title .talk-box {
        margin: 0 50px;
        margin-top: 10px;
        width: 80%;
        text-align: left;
    }

    .author-title .talk-box > p {
        margin: 0;
    }

    .author-title .talk-box .reply {
        font-size: 16px;
        color: #000;
    }

    .author-title .reply-box {
        margin: 10px 0 0 50px;
        background-color: #efefef;
    }

</style>
